<template>
  <div class="view-container letter-save">
    <header class="view-header center">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>发布信息</span>
        </div>
        <div class="header-form">
          <div class="header-form-item">
            <el-button @click="submitForm" :loading="submitLoading" type="success">保存</el-button>
          </div>
        </div>
      </div>
    </header>
    <div class="form-container">

      <el-form :model="work" ref="form" :rules="rules" label-width="100px">
        <div class="form-header">
          <div class="top-bar">
            <div class="top-bar-tag"></div>
            <div class="top-bar-title">发布信息</div>
          </div>
          <div class="section">
            <el-form-item label="标题" prop="infoTitle">
              <el-input v-model.trim="work.infoTitle" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="文号" prop="infoCode">
                  <el-input v-model.trim="work.infoCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用途" prop="infoUse">
                  <el-input v-model.trim="work.infoUse"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="分类">
                  <el-select v-model="work.infoType">
                    <el-option value="下传" label="下传"></el-option>
                    <el-option value="上传" label="上传"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="  ">
                  <el-checkbox v-model="work.allowTop">置顶</el-checkbox>
                  <el-checkbox v-model="work.allowComment">允许回复</el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="14">
                <el-form-item label="权限" prop="shareType">
                  <el-radio-group v-model="work.shareType" @change="handleChange">
                    <el-radio :label="3">全部</el-radio>
                    <el-radio :label="2">科室</el-radio>
                    <el-radio :label="1">个人</el-radio>
                    <el-radio :label="0">私人</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-cascader
                  v-model="work.sharedZoneList"
                  :options="optionsDepartment"
                  v-if="work.shareType === 2"
                  :show-all-levels="false"
                  :props="props"
                  clearable
                  placeholder="请选择科室"
                ></el-cascader>
                <el-select
                  multiple
                  v-model="work.sharedZoneList"
                  v-if="work.shareType === 1"
                  placeholder="请选择用户"
                >
                  <el-option v-for="(item,index) in userList" :key="index" :value="item.userId" :label="item.userNickname"></el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row>

            </el-row>
          </div>
        </div>
        <div class="form-content">
          <div class="top-bar">
            <div class="top-bar-tag"></div>
            <div class="top-bar-title">内容</div>
          </div>
          <div class="section">
            <Tinymce ref="editor" v-model="work.infoContent" :height="300" />
          </div>
        </div>
      </el-form>
    </div>
  </div>

</template>

<script>
  import departmentAPI from '@/api/system/department'
  import workAPI from '@/api/workExchange/workExchange'
  import userAPI from '@/api/system/user'
  import Tinymce from '@/components/Tinymce'
  import {mapGetters} from 'vuex'

  export default {
    name: 'WorkExchangeSave',
    components: { Tinymce },
    data() {
      const shareValid = (rule, value, callback) => {
        if(this.work.sharedZoneList.length === 0){
          if(this.work.shareType === 2){
            callback(new Error('请选择科室'))
          }else if(this.work.shareType === 1){
            callback(new Error('请选择用户'))
          }else{
            callback()
          }
        }else{
          callback()
        }

      }
      return {
        work: {
          allowComment: false,
          allowTop: false,
          infoCode: "",
          infoContent: "",
          infoTitle: "",
          infoType: "下传",
          infoUse: "",
          shareType: 1,
          sharedZoneList: [
            0
          ]
        },
        props: { multiple: true },
        optionsDepartment:[],
        rules: {
          infoTitle:[
            {required:true,message:'请输入标题',trigger:'blur'}
          ],
          infoCode:[
            {required:true,message:'请输入文号',trigger:'blur'}
          ],
          infoUse:[
            {required:true,message:'请输入用途',trigger:'blur'}
          ],
          shareType:[
            {validator:shareValid,trigger:'change'}
          ]
        },
        submitLoading: false,
        userList:[],
      }
    },
    created() {
      this.fetchList()
    },
    computed:{
      ...mapGetters([
        'userId'
      ])
    },
    methods: {
      handleChange(val){
        this.work.sharedZoneList.splice(0,this.work.sharedZoneList.length)
      },
      fetchList(){
        this.setUserList()
        this.setDepartmentList()
      },
      setDepartmentList(){
        departmentAPI.getList().then(res=>{
          const arr = res.result
          this.recursion(null,this.optionsDepartment,arr)
          console.log(this.optionsDepartment)
        })
      },
      recursion(obj, targetArr, sourceArr) {
        if (sourceArr !== null && sourceArr.length !== 0) {
          for (let i in sourceArr) {
            const source = sourceArr[i]
            let target = {}
            target.value = source.departmentId
            target.label = source.departmentName
            target.children = []
            targetArr.push(target)
            this.recursion(target, target.children, source.children)
          }
        } else {
          if (obj !== null) {
            delete obj.children
          }
        }
      },
      setUserList(){
        userAPI.getList('','',1,100).then(res=>{
          this.userList = res.records
        })
      },
      getUserList(){
        userAPI.getList('','',1,100).then(res=>{
          console.log(res.records)
          this.userList = res.records
        })
      },
      submitForm() {
        this.$refs['form'].validate(valid => {
          if (!this.submitLoading && valid) {
            if(this.work.infoContent.trim() === ''){
              this.$message.warning('请输入内容')
            }else{
              console.log(this.work)
              this.work.sharedZoneList = this.handArr(this.work.sharedZoneList)
              this.saveOrUpdate()
            }
          }
        })
      },
      handArr(arr){
        const result = []
        for(let val of arr){
          result.push(val[val.length-1])
        }
        return result
      },
      saveOrUpdate(){
        this.submitLoading = true
        workAPI.save(this.work).then(res=>{
          this.submitLoading = false
          this.$message.success('保存成功')
          // let-todo 根据类型跳转道不同的列表
          this.$router.push('/work-exchange/all')
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  $height:35px;
  $borderColor:1px solid #e0e0e0;
  $boxShadow:0 0 3px rgba(0,0,0,0.1);

  /*global +*/
  .top-bar {
    height: $height;
    line-height: $height;
    padding: 0 15px;
    background-color: #FBFBFB;
    border-bottom: $borderColor;
    display: flex;
    justify-content: space-between;

    .top-bar-tag {
      width: 5px;
      height: $height;
    }

    .top-bar-title {
      font-size: 16px;
    }
  }
  /*global -*/

  .view-container {
    font-size: 14px;
    background-color: #F4F9FD;
    .form-container {
      padding: 0 250px 15px;
    }
  }
  /*common +*/
  .form-header .section,
  .form-content .section {
    background-color: white;
    padding: 15px;
  }
  .form-header,.form-content {
    border: $borderColor;
    margin-bottom: 20px;
  }
  /*common -*/

  .form-container {
    position: relative;
  }
  .view-header {
    background-color: white;
    &.center {
      padding: 10px 250px ;
    }
    .header-title {
      font-size: 16px;
    }
  }
  .letter-save {
    padding:0;
  }

</style>
